<template>
  <div class="userinfomodify">
    <el-input
      v-model="input1"
      placeholder="请输入内容"
      class="input-with-select"
    >
      <el-select slot="prepend" v-model="select" placeholder="请选择">
        <el-option label="姓名" value="1" />
        <el-option label="身份证号" value="2" />
      </el-select>
      <el-button
        slot="append"
        icon="el-icon-search"
        @click="query()"
      >查询</el-button>
    </el-input>
    <el-button plain class="vbutton el-icon-check">提交</el-button>
    <!-- 纵向表格 -->
    <table
      v-for="(item, index) in tableList"
      v-show="hidetable"
      id="printTest"
      :key="index"
      class="tableInfo"
    >
      <thead />
      <tbody>
        <tr>
          <td>姓名</td>
          <td>{{ item.name }}</td>
          <td><el-input v-model="name" type="text" /></td>
        </tr>
        <tr>
          <td>性别</td>
          <td>{{ item.sex }}</td>
          <td>
            <el-select v-model="sex" placeholder="请选择">
              <el-option
                v-for="item in info"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </td>
        </tr>
        <tr>
          <td>身份证号</td>
          <td>{{ item.idCard }}</td>
          <td><el-input v-model="idCard" type="number" /></td>
        </tr>
        <tr>
          <td>用地项目名称</td>
          <td>{{ item.uselandname }}</td>
          <td>
            <!-- {{ uselandname }} -->
            <el-select v-model="uselandname" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </td>
        </tr>
        <tr>
          <td>参保类型</td>
          <td>{{ item.insurancetype }}</td>
          <td>
            <el-select v-model="insurancetype" placeholder="请选择">
              <el-option
                v-for="item in data"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </td>
        </tr>
        <tr>
          <td>基准补贴年限</td>
          <td>{{ item.yearsubsidy }}</td>
          <td>{{ yearsubsidy }}</td>
        </tr>
        <tr>
          <td>享受困难补贴年限</td>
          <td>{{ item.difficultysubsidy }}</td>
          <td>
            <el-input v-model="difficultysubsidy" type="number" />
          </td>
        </tr>
        <tr>
          <td>企业缴费年限</td>
          <td>{{ item.enterprisepayment }}</td>
          <td>
            <el-input v-model="enterprisepayment" type="number" />
          </td>
        </tr>
        <tr>
          <td>享受补贴年限</td>
          <td>{{ item.enjoysubsidy }}</td>
          <td>{{ enjoysubsidy }}</td>
        </tr>
        <tr>
          <td>补贴金额</td>
          <td>{{ item.subsidyamount }}</td>
          <td>{{ subsidyamount }}</td>
        </tr>
      </tbody>
    </table>

    <!-- 横向表格 -->
    <div v-show="datainfo" class="datainfo">
      <el-button plain class="el-icon-aim" @click="determine">确定</el-button>
      <el-button plain class="el-icon-delete" @click="cancel">取消</el-button>
      <el-table :data="tableList" border style="width: 1831px" 
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      :row-style="{ 'height': '48px'}">
        <el-table-column prop="serial" label="序号" width="60" />
        <el-table-column prop="state" label="状态" width="110" />
        <el-table-column prop="name" label="姓名" width="110" />
        <el-table-column prop="sex" label="性别" width="60" />
        <el-table-column prop="idCard" label="身份证号" width="180" />
        <el-table-column prop="guarantee" label="社保卡号" width="180" />
        <el-table-column prop="accountname" label="开户行名称" width="180" />
        <el-table-column prop="accountCard" label="银行账号" width="200" />
        <el-table-column prop="sociologytype" label="原有社保类型" width="180" />
        <el-table-column prop="sociologystate" label="社保缴费状态" width="180" />
        <el-table-column prop="subsidy" label="享受困难补贴年限" width="100" />
        <el-table-column prop="pension" label="职工养老缴费年限" width="100" />
        <el-table-column prop="landproject" label="征地项目" width="180" />
        <el-table-column
          prop="landage"
          label="被征地时年龄（周岁）"
          width="180"
        />
        <el-table-column prop="subsidyyear" label="基准补贴年限" width="180" />
        <el-table-column prop="enjsubsidyyear" label="享受补贴年限" width="180" />
        <el-table-column prop="subsidymoney" label="补贴金额" width="180" />
        <el-table-column prop="insured" label="参保类型" width="120" />
        <el-table-column prop="createtime" label="创建时间" width="180" />
        <el-table-column prop="remarks" label="备注" width="180" />
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      msg: '人员信息更改',
      input1: '',
      select: '', // 搜索依据（姓名 or 身份证号）
      name: '',
      sex: '',
      idCard: '',
      uselandname: '', // 用地项目名称
      insurancetype: '', // 参保类型
      yearsubsidy: '', // 基准年限补贴
      difficultysubsidy: '', // 享受困难补贴年限
      enterprisepayment: '', // 企业缴费年限
      enjoysubsidy: '', // 享受补贴年限
      subsidyamount: '', // 补贴金额
      options: [
        {
          value: '选项1',
          label: '123--2019--96--01'
        }
      ],
      data: [
        {
          value: '选项1',
          label: '城居保'
        },
        {
          value: '选项2',
          label: '职保'
        },
        {
          value: '选项3',
          label: '其他'
        }
      ],
      info: [
        {
          value: '选项1',
          label: '男'
        },
        {
          value: '选项2',
          label: '女'
        },
        {
          value: '选项3',
          label: '未知'
        }
      ],
      hidetable: false, // 纵向表格显示隐藏
      datainfo: false, // 横向表格显示隐藏
      tableList: [] // 单条用户详细数据
    }
  },
  methods: {
    query(name) {
      this.datainfo = true
      this.hidetable = false
    },
    determine() {
      this.datainfo = false
      this.hidetable = true
    },
    cancel() {
      this.datainfo = false
    }
  }
}
</script>

<style scoped lang="scss">
.userinfomodify {
  padding: 30px;
  .el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
  .input-with-select {
    width: 450px;
    .el-input-group__prepend {
      // width: 150px;
      .el-select {
        width: 105px;
        text-align: center;
      }
    }
  }
  .vbutton {
    margin-left: 15px;
  }
  .tableInfo {
    padding: 0;
    margin-top: 20px;
    tr {
      padding: 0;
      width: 750px;
      height: 57px;
      line-height: 57px;
      td {
        box-sizing: border-box;
        padding: 0 20px;
        width: 350px;
        border-radius: 5px;
        .el-select {
          width: 100%;
          // border: none;
          .el-input__inner {
            border: none;
          }
        }
      }
      td:nth-child(1) {
        color: #111;
        box-shadow: 2px 1px 5px #ccc;
        background-color: #dcdfe6;
        border-bottom: none;
        text-align: center;
      }
      td:nth-child(2) {
        color: #111;
        box-shadow: 2px 1px 5px #ccc;
        background-color: #ddd;
        border-bottom: none;
        text-align: center;
      }
      td:nth-child(3) {
        box-shadow: 2px 1px 5px #ccc;
        margin-left: 20px !important;
      }
    }
    tr:last-child {
      td {
        border-bottom: none;
      }
    }
    tr:nth-child(odd) {
      // background-color: #dcdfe6;
    }
  }
  .datainfo {
    margin-top: 20px;
    .el-table {
      margin-top: 20px;
    }
  }
}
</style>
